<script setup>
import { User, Clock, Star, Edit, Delete } from '@element-plus/icons-vue'
import { delNewsServe } from '@/api/news.js'

const emit = defineEmits(['flush', 'put'])
defineOptions({
  name: 'NewsMsg'
})
defineProps({
  item: {
    type: Object
  }
})
const edit = async (item) => emit('put', item)
const del = async (id) => {
  ElMessageBox.confirm('您确定要删除该新闻吗？', '警告', {
    distinguishCancelAndClose: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const res = await delNewsServe({ id: id, isdelete: 1 })
      emit('flush')
      if (res.data.code === 200) ElMessage.success('删除成功')
      else ElMessage.error(res.data.msg)
    })
    .catch(() => {})
}
</script>

<template>
  <div class="row rows my-4 border shadow">
    <div
      class="col-lg-3 col-12 my-3"
      @click="$router.push(`/advice/${item.id}`)"
    >
      <img
        :src="item.image"
        width="262"
        height="186"
        class="d-block mx-auto"
        alt=""
      />
    </div>
    <div class="col-lg-7 col-12 d-flex flex-column mx-4 justify-content-around">
      <h5>{{ item.newstitle }}</h5>
      <p v-html="item.newscontent"></p>
      <div class="d-flex">
        <el-link class="mx-4" :underline="false" :icon="User">{{
          item.readcount
        }}</el-link>
        <el-link class="mx-4" :underline="false" :icon="Clock"
          >{{ new Date(item['created_at']).toLocaleDateString() }}
        </el-link>
        <el-link :underline="false" :icon="Star">{{ item.collect }}</el-link>
      </div>
      <div class="buttons d-flex my-3 d-lg-block justify-content-center">
        <el-button plain :icon="Edit" type="primary" @click="edit(item)"
          >编辑</el-button
        >
        <el-button plain :icon="Delete" type="danger" @click="del(item.id)"
          >删除</el-button
        >
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.rows {
  position: relative;
  cursor: pointer;
  & > * {
    z-index: 6;
    transition: 0.5s;
  }
  .buttons {
    visibility: hidden;
  }
  &::before {
    content: '';
    z-index: 5;
    background-color: #104094;
    width: 0%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    transition: 0.5s;
  }
  &:hover::before {
    width: 100%;
  }
  &:hover {
    color: white;
    a {
      color: white;
    }
    .buttons {
      visibility: visible;
    }
  }
}
p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
